<template>
    <div class="shopping-cart">
        <h1>Shopping Cart</h1>

        <!-- 商品列表 -->
        <div class="product-list">
            <div v-for="product in products" :key="product.id" class="product">
                <img :src=product.img alt="Product Image">
                <div class="product-details">
                    <h2>{{ product.name }}</h2>
                    <p>unit price:${{ product.price }}</p>
                    <div class="quantity">
                        <button @click="product.quantity--" >-</button>
                        <input type="number" min="1" v-model="product.quantity">
                        <button @click="product.quantity++">+</button>
                    </div>
                    <p>extended price:${{ product.price*product.quantity }}</p>
                </div>
            </div>

            <!-- 购物车总结 -->
            <div class="cart-summary">
                <h3>Cart Summary</h3>
                <p>Total Items: <span>2</span></p>
                <p>Total Price: <span>$150.00</span></p>
                <button class="checkout-btn">Checkout</button>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive, watch } from 'vue';

//任务说明：
// ref 可以用于管理输入框中的商品数量值。
// reactive 可以用于管理购物车中的商品列表、商品的数量、价格等信息。
// 计算属性 可以用于自动计算购物车中商品的总数量和总价格。
// 样式绑定 可以动态地调整按钮或商品样式，例如根据商品库存状态或数量做出样式变化。
// 在此基础上，你可以编写 Vue 3 代码，实现一个完整的购物车功能。

//商品接口
interface Product {
    id: number,
    img: string,
    name: string,
    price: number,
    quantity: number,
}

//商品数组
let products: Product[] = reactive([
    {
        id: 1,
        img: "/./src/assets/images/laoda.png",
        name: "冰红劳大",
        price: 100.00,
        quantity: 1,
    },
    {
        id: 2,
        img: "/./src/assets/images/meixi.jpg",
        name: "劲凉梅西",
        price: 50.00,
        quantity: 1
    }
])

watch(products,()=>{
    for (const e of products) {
        if (e.quantity < 1) {
           e.quantity = 1
        }
    }
})









</script>

<style scoped>
/* 主体购物车样式 */
.shopping-cart {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.product img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.product-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-details h2 {
    margin: 0;
}

.product-details p {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* 数量调节按钮 */
.quantity {
    display: flex;
    align-items: center;
}

.quantity button {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
}

.quantity button:hover {
    background-color: #45a049;
}

.quantity input {
    width: 40px;
    text-align: center;
}

/* 购物车总结 */
.cart-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ccc;
    text-align: right;
}

.cart-summary h3 {
    margin-bottom: 10px;
}

.cart-summary p {
    font-size: 1.2em;
    margin: 5px 0;
}

.checkout-btn {
    padding: 10px 20px;
    background-color: #2196f3;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
}

.checkout-btn:hover {
    background-color: #0b7dda;
}
</style>